{extend name="common/index"}
{block name="css"}
<style>
    .layui-table-cell{
        padding: 0 8px;
    }
</style>
{/block}
{block name="content"}
<!--条件搜索栏-->
<div class="layui-row">
    <form id="searchForm" class="layui-form layui-form-pane tpl-form-search" onkeydown="if(event.keyCode=='13'){reloadTable('#searchForm');return false;}">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline">
                    <input type="text" name="nick_name" placeholder="请输入账号" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="real_name" placeholder="请输入真实姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" placeholder="请输入手机号" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">证件号</label>
                <div class="layui-input-inline">
                    <input type="text" name="card_no" placeholder="身份证号/通行证号..." class="layui-input">
                </div>
            </div>
            <!--部门下拉列表-->
            <div id="selectDeptId" class="layui-inline"></div>
            <input type="hidden" name="dept_id" id="dept_id">
            <div class="layui-inline">
                <label class="layui-form-label">注册日期</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="create_begin" id="create_begin" class="layui-input">
                </div>
                <div class="layui-form-mid">--</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="create_end" id="create_end" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-btn-group">
                    <a class="layui-btn layui-btn-normal" onclick="reloadTable('#searchForm');">搜索</a>
                    <a class="layui-btn"  href="{:url('edit')}">新增</a>
                    <a class="layui-btn layui-btn-danger">删除</a>
                    <a class="layui-btn layui-btn-warm" href="javascript:;" onclick="exportData()">导出数据</a>
                </div>
            </div>
        </div>
    </form>
</div>
<!--数据列表-->
<div class="layui-btn-group">
    <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="ajaxDelete(getSelectedIdList(), '{:url("delete")}');">
    <i class="layui-icon layui-icon-delete"></i>批量删除
    </button>
</div>
<!--数据列表-->
<table id="userTable" lay-filter="userTable"></table>
<!--操作列-->
<script type="text/html" id="operating">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-normal layui-btn-xs" href="javascript:;" onclick="changePwd({{d.user_id}}, '修改密码', '{:url("user/changePassword")}');">改密码</a>
        <a class="layui-btn layui-btn-xs" href="javascript:;" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" href="javascript:;" lay-event="del">删除</a>
    </div>
</script>

{/block}

{block name="script"}
<script type="text/javascript">
    var table;
    layui.use(['form','laydate', 'table', 'layer'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        table = layui.table;
        var layer = layui.layer;

        /*注册日期，执行一个laydate实例*/
        laydate.render({elem: '#create_begin'});
        laydate.render({elem: '#create_end'});

        //表格数据渲染
        tableIns = table.render({
            elem: '#userTable'
            ,url: '{:url("getDataList")}'
            ,page: true
            ,limit: table_limit
            ,limits: table_limits
            ,cols: [[
                {type:'checkbox', width: 45}
                ,{field:'nick_name', title:'帐号', width: '8%', edit: 'text'}
                ,{field:'real_name', title:'真实姓名', width: '8%', edit: 'text'}
                ,{field:'tel', title:'手机号码', width: '11%', edit: 'text'}
                ,{field:'role_name', title:'权限分组', width: '11%'}
                ,{field:'dept_name', title:'部门', width: '11%'}
                ,{field:'signature', title:'个性签名'}
                ,{field:'create_time', title:'注册日期', width: '11%'}
                ,{title:'操作', toolbar: '#operating', width: 135, align:'center'}
            ]]
            ,where: getFormJson('#searchForm')
        });

        //监听单元格编辑
        table.on('edit(userTable)', function(obj){
            var data = {};
            var res = {};
            var index = layer.load(2, {shade:[0.5,'#000'],time: 10*1000});

            data[obj.field] = obj.value;
            data['user_id'] = obj.data.user_id;
            $.ajax({
                url: '{:url("updateField")}',
                type: 'POST',
                data: data,
                dataType: 'json',
                async: false,
                success: function (result) {
                    layer.close(index);
                    res = result;
                }
            });

            if (!res.code) {
                $(this)[0].value = $(this).prev().text();
                layer.alert(res.msg, {icon:2, title:'保存失败！'});
            }
            return false;
        });

        //监听操作栏
        table.on('tool(userTable)', function(obj){
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定删除吗？', function(index){
                    $.post('{:url("delete")}',{id:data.user_id}, function (result) {
                        layer.close(index);
                        if (result.code) {
                            obj.del();
                        } else {
                            layer.msg(result.msg, {icon:2});
                        }
                    }, 'json');
                });
            } else if (obj.event === 'edit') {
                window.location.href = 'edit?user_id='+data.user_id;
            }
        });
    });

    //部门，级联选择
    layui.config({
        base: '__ADMIN__/js/'
    }).use('linkSelect', function () {
        var linkSelect = layui.linkSelect;
        var inputFrame = 'layui-input-inline';//内联排版
        var deptList = {$deptList|default='0'};

        //本地数据渲染
        link = linkSelect.render({
            elem: '#selectDeptId',
            data: deptList,
            inputFrame: inputFrame,          //默认排版方式
            lableName: '部门',
            selected: function (item,dom) {
                var val = link.getValue();
                var val_last = 0;
                if (val[val.length-1] != undefined) {
                    val_last = val[val.length-1].value;
                }
                $("#dept_id").val(val_last);
            }
        });
    });

    function exportData() {
        var url = '{:url("exportData")}';
        window.open(url + '?' + $('#userForm').serialize());
    }


    //获取当前选中的id，数组
    function getSelectedIdList() {
        var checkList = table.checkStatus('userTable');
        var id_list = [];
        if (checkList.data.length>0) {
            $.each(checkList.data, function (key, val) {
                id_list[key] = val.user_id;
            });
        }
        return id_list;
    }

</script>
{/block}